<template>
	<view class="nav_item">
		<text class="fuh">¥</text>
		<text class="num">9</text>
		<text class="condition">满98可用</text>
		<view class="line"></view>
		<text class="name">优惠券名称</text>
		<text class="alluse">全场通用</text>
		<text class="date">有限日期：2023/01/31</text>
		<view class="use" v-if="canUse">
			<u-button @click="handleClick" size="mini" type="primary" shape="circle" text="使用"></u-button>
		</view>
		<image v-else src="/static/guoqi.png" class="guoqi"></image>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	const props = defineProps({
		data: {}
	})
	const canUse = computed(() => {
		return true
	})
	const emits = defineEmits(['click'])
	const handleClick = () => {
		emits('click', props.data)
	}
</script>

<style lang="scss" scoped>
	.nav_item {
		position: relative;
		margin-top: 20rpx;
		margin-left: 36rpx;
		width: 689rpx;
		height: 193rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.fuh {
			position: absolute;
			left: 48rpx;
			top: 56rpx;
			font-size: 38rpx;
			font-family: Helvetica;
			color: #FD4D00;
			line-height: 46rpx;
		}

		.num {
			position: absolute;
			left: 80rpx;
			top: 37rpx;
			font-size: 60rpx;
			font-family: Helvetica;
			color: #FD4D00;
			line-height: 72rpx;
		}

		.condition {
			position: absolute;
			left: 37rpx;
			top: 113rpx;
			font-size: 22rpx;
			font-family: Helvetica;
			color: #FD4D00;
			line-height: 26rpx;
		}

		.line {
			position: absolute;
			left: 180rpx;
			top: 26rpx;
			width: 1rpx;
			height: 140rpx;
			background: #E6E6E6;
		}

		.name {
			position: absolute;
			left: 202rpx;
			top: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #0E0E0E;
			line-height: 40rpx;
		}

		.alluse {
			position: absolute;
			left: 223rpx;
			top: 94rpx;
			font-size: 24rpx;
			font-family: Helvetica;
			color: #A0A0A0;
			line-height: 29rpx;
		}

		.date {
			position: absolute;
			left: 223rpx;
			top: 135rpx;
			font-size: 24rpx;
			font-family: Helvetica;
			color: #A0A0A0;
			line-height: 29rpx;
		}

		.use {
			position: absolute;
			left: 520rpx;
			top: 110rpx;
			width: 141rpx;

		}

		.guoqi {
			position: absolute;
			right: 47rpx;
			top: 42rpx;
			width: 114rpx;
			height: 114rpx;
		}
	}
</style>